<template>
  <div id="xl">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/s' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>药库</el-breadcrumb-item>
      <el-breadcrumb-item>销毁记录</el-breadcrumb-item>
    </el-breadcrumb>
        <el-card>
          <!-- 查询条件开始 -->
          <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
            <el-form-item label="销毁单" prop="providerId" style="margin-left: 0%">
             <el-input v-model="queryParams.destroyId"></el-input>
            </el-form-item>
            <el-form-item label="销毁人">

              <el-input v-model="queryParams.destroyName"></el-input>
            </el-form-item>

            <el-form-item style="margin-left: 80%">
              <el-button type="primary" icon="el-icon-search" size="mini" @click="initData()">搜索</el-button>
              <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>



          <el-table
              :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
              border stripe style="width: 100%;margin-top: -10px"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
          >

            <el-table-column
                prop="destroyId"
                label="销毁单"
               >
              <template #default="scope">
                <router-link :to="{path: '/destroyRecordDetails',query:{key:scope.row.destroyId,value:JSON.stringify(scope.row)}}">
                  {{scope.row.destroyId}}
                </router-link>
              </template>


            </el-table-column>
            <el-table-column
                prop="destroyName"
                label="销毁人"
            >
            </el-table-column>
            <el-table-column
                prop="destroyDate"
                label="销毁时间"
            >
            </el-table-column>
            <el-table-column
                prop="destroyNote"
                label="备注"
            >
            </el-table-column>
          </el-table>
          <br>
          <!--分页-->
          <div class="fy_div" style="margin-left: 400px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
          </div>

          <!-- 分页控件结束 -->
        </el-card>


  </div>


</template>

<script>
import http, {service} from "@/http/request";
import Cookies from 'js-cookie';
export default {
  name: "destroyRecord",
  data(){
    return{
      queryParams:{
      destroyId:"",
        destroyName:"",
      },

      tableData:[],
      currentPage:1, //初始页
      pagesize:10,    //    每页的数据
      drugStates:[
        {
          id:1,
          name:'中药'
        },{
          id:2,
          name: "西药"
        }
      ],
      drugJiXins:[
        {
          id:'丸剂',
          name:'丸剂'
        },
        {
          id:"口服液",
          name: '口服液'
        },
        {
          id:'片剂',
          name: '片剂'
        },
      ],
      supplier:{
        supplierState:0
      },


      providerOptions:[]
    }
  },
  methods:{

    resetQuery(){

    },

    insertAllot(){

    },


    initData(){
      service.post("find-destroy",this.queryParams)
          .then((v) => {
            this.tableData = v.data;
          })
    },

    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function(currentPage){
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },




  },
  created() {
    this.initData();
    service.post("find-supplier",this.supplier)
        .then((v) => {
          this.providerOptions = v.data;
        })


  },
}
</script>

<style scoped>
a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}

.el-card{
  margin-top: 50px;

}
.block{
  margin-left: 350px;
}
.fy_div{
  margin-top:20px;
  margin-left: -200px;
}

.T1{
  list-style-type: none;
}
</style>
